import { createBrowserRouter } from "react-router-dom";
import { lazy, Suspense } from "react";
import Inaccessible from "@/components/inaccessible/inaccessible";
import Loading from "@/components/loading/loading";
import { Navigate } from "react-router-dom";

const Login = lazy(() => import("@/components/login/login"));
const Register = lazy(() => import("@/components/register/register"));
const Index = lazy(() => import("@/components/index/index"));
// 三级路由
const Batch = lazy(() => import("@/components/batch/batch"));
const PhoneVerify = lazy(() => import("@/components/phoneVerify/phoneVerify"));
const VideoLike = lazy(() => import("@/components/videoLike/videoLike"));
const VideoDistribution = lazy(
  () => import("@/components/videoDistribution/videoDistribution")
);

const FansCollection = lazy(
  () => import("@/components/fanCollection/fanCollection")
);
type AuthTokenRouterProps = {
  children: React.ReactElement[] | React.ReactElement;
};
const AuthTokenRouter = ({
  children,
}: AuthTokenRouterProps):
  | React.ReactElement
  | React.ReactElement[]
  | undefined => {
  if (!localStorage.token) {
    return <Navigate to={"/login"} replace />;
  }
  return children;
};

const router: any = createBrowserRouter([
  {
    path: "/",
    element: (
      <Suspense fallback={<Loading />}>
        <AuthTokenRouter>
          <Index />
        </AuthTokenRouter>
      </Suspense>
    ),
    children: [
      {
        path: "dashboard",
        element: (
          <Suspense fallback={<Loading />}>
            <AuthTokenRouter>
              <Index />
            </AuthTokenRouter>
          </Suspense>
        ),
        children: [
          {
            path: "batch",
            element: (
              <Suspense fallback={<Loading />}>
                <Batch />
              </Suspense>
            ),
          },
          {
            path: "phone_verify",
            element: (
              <Suspense fallback={<Loading />}>
                <PhoneVerify />
              </Suspense>
            ),
          },
          {
            path: "video_like",
            element: (
              <Suspense fallback={<Loading />}>
                <VideoLike />
              </Suspense>
            ),
          },
          {
            path: "video_istribution",
            element: (
              <Suspense fallback={<Loading />}>
                <VideoDistribution />
              </Suspense>
            ),
          },
          {
            path: "fans_collection",
            element: (
              <Suspense fallback={<Loading />}>
                <FansCollection />
              </Suspense>
            ),
          },
        ],
      },
    ],
  },
  {
    path: "/login",
    element: (
      <Suspense fallback={<Loading />}>
        <Login />
      </Suspense>
    ),
  },
  {
    path: "*",
    element: <Inaccessible />,
  },
  {
    path: "/register",
    element: (
      <Suspense fallback={<Loading />}>
        <Register />
      </Suspense>
    ),
  },
]);

export default router;
